<template>
  <div>
    <div class="bindBank aui-margin-b-15 aui-ftn14 aui-bg-f">
      <ul
        class="aui-list aui-list-in aui-padded-10"
        style="background-image: none"
      >
        <div class="alipay aui-margin-t-15">
          <div class="cont aui-padded-10">
            <van-row class="aui-margin-b-10 list">
              <van-col span="8">开户银行</van-col>
              <van-col span="14" class="aui-text-right aui-text-9" @click="bank.show = true">
                <input
                  type="text"
                  placeholder="请选择开户银行"
                  v-model="user.bank"
                  disabled
                  style="background-color: #fff"
                />
              </van-col>
            </van-row>
            <van-row class="aui-margin-b-10 list">
              <van-col span="8">银行卡卡号</van-col>
              <van-col span="14" class="aui-text-right aui-text-9">
                <input
                  type="text"
                  placeholder="请输入银行卡号"
                  v-model="user.card"
                />
              </van-col>
            </van-row>
            <van-row class="aui-margin-b-10 list">
              <van-col span="8">开户姓名</van-col>
              <van-col span="14" class="aui-text-right aui-text-9">
                <input
                  type="text"
                  placeholder="请输入姓名"
                  v-model="user.name"
                />
              </van-col>
            </van-row>
            <van-row class="aui-margin-b-10 list">
              <van-col span="8">开户身份证号</van-col>
              <van-col span="14" class="aui-text-right aui-text-9">
                <input
                  type="text"
                  placeholder="请输入身份证号"
                  v-model="user.idcard"
                />
              </van-col>
            </van-row>
            <van-row class="aui-margin-b-10 list" @click="address.show = true">
              <van-col span="8">开户银行地区</van-col>
              <van-col span="14" class="aui-text-right aui-text-9">
                <input
                  type="text"
                  placeholder="请选择开户银行所在地"
                  v-model="address.text"
                  disabled
                  style="background-color: #fff"
                />
              </van-col>
            </van-row>
            <!-- <van-row class="aui-margin-b-10 list">
              <van-col span="8">开户手机号</van-col>
              <van-col span="14" class="aui-text-right aui-text-9">
                <input
                  type="text"
                  placeholder="请输入银行卡预留手机号"
                  v-model="user.mobile"
                />
              </van-col>
            </van-row>
            <van-row class="aui-margin-b-10 list">
              <van-col span="8">
                验证码
              </van-col>
              <van-col span="10" class="aui-padded-l-10 aui-text-9">
                <input
                  type="text"
                  name="verify"
                  v-model="user.verify"
                  placeholder="验证码"
                />
              </van-col>
              <van-col span="6">
                <div
                  class="aui-btn aui-ftn12"
                  @click="fnVerify"
                  v-bind:class="{
                    'aui-btn-danger': !code.isSet,
                    'aui-btn-primary': code.isSet,
                  }"
                  v-cloak
                >
                  {{ code.verify }}
                </div>
              </van-col>
            </van-row> -->
            <div class="bt aui-padded-15">
              <div class="other">
                <i class="iconfont icon-dianliang aui-text-red aui-ftn22"></i>
                <div class="aui-ftn12 aui-text-red aui-padded-l-5">
                  温馨提示:绑定银行卡请务必仔细核对好帐户信息
                </div>
              </div>
            </div>
          </div>
        </div>
      </ul>
      <div class="aui-margin-15 aui-padded-b-10">
        <div
          class="aui-bg-red aui-text-f aui-text-center submit_btn aui-ftn16"
          @click="fnSubmit"
        >
          确定
        </div>
      </div>
    </div>
    <!-- 开户银行地区 -->
    <van-popup v-model="address.show" position="bottom">
      <van-area
        title="开户银行地区"
        :value="address.id"
        :area-list="address.cityArray"
        item-height="60"
        @confirm="fnSelectCity"
        @cancel="address.show = false"
      />
    </van-popup>
    <!-- 选择银行 -->
    <van-action-sheet v-model="bank.show" :actions="bank.actions" @select="onSelectBank" />
  </div>
</template>

<script>
import User from "@/service/user.js";
import city from "@/service/city.js";
import sign from "@/service/sign.js";
export default {
  name: "bindBank",
  data() {
    return {
      address: {
        show: false,
        cityArray: city,
        text: "",
        id: '110000'
      },
      bank: {
        show: false,
        actions: [{name: "中国建设银行"},{ name: '中国农业银行' }, { name: '中国银行' }, { name: '交通银行' }, { name: '平安银行' }, { name: '招商银行' }, { name: '中国邮政储蓄银行' }]
      },
      user: {
        card: "",
        uid: "",
        name: "",
        bank: "",
        idcard: "",
        province: "",
        city: "",
        area: "",
        isToken: true,
      },
      // code: {
      //   isSet: false,
      //   verify: "发送验证码",
      // },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init: function() {
      this.user.uid = this.$store.state.uid;
      this.fnGetData();
    },
    fnGetData: function() {
      User.getBank({
        uid: this.$store.state.uid,
        isToken: true,
      }).then((res) => {
        if (res && res.status) {
          let {province, city, area} = res.data;
          this.address.text = `${province}${city}${area}`;
          this.user = {
            ...res.data,
            uid: this.$store.state.uid,
            isToken: true,
          };
          if (province) {
            if (area) {
              this.address.id = this.getFindKey(area, this.address.cityArray.county_list)
            } else {
              this.address.id = this.getFindKey(area, this.address.cityArray.city_list)
            }
          }
        }
      });
    },
    getFindKey (value, obj) {
      let objlist = JSON.parse(JSON.stringify(obj)) ;
      // delete objlist.me;
      let findKey = (value, compare = (a, b) => a === b) =>{
        return Object.keys(objlist).find(k => compare(objlist[k], value))
      }
        return findKey(value);
      },
          // 请选择开户地区
    fnSelectCity(val) {
      const [province, city, area] = val.map((item) => item.name);
      let { cityArray, ...params } = this.address;
      this.address = {
        show: false,
        text: `${province}${city}${area}`,
        cityArray,
        id: area ? val[2].code : val[1].code
      };
      this.user.province = province;
      this.user.city = city;
      this.user.area = area;
    },
    // 选择开户银行
    onSelectBank (item) {
      const {name} = item;
      this.user.bank = name;
      this.bank.show = false;
    },
    // 发送短信
    // fnVerify: function() {
    //   if (this.fnCheckMobile()) {
    //     if (!this.code.isSet) {
    //       // 短信api
    //       sign.fnSendMsg({ mobile: this.user.mobile }).then((res) => {
    //         if (res) {
    //           this.utils.fnMsg(res.msg);
    //           if (res.status) {
    //             this.setTime(60);
    //           }
    //         }
    //       });
    //     }
    //   }
    // },
    // 校验手机号
    // fnCheckMobile: function() {
    //   var mobileFormat = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
    //   if (!this.user.mobile) {
    //     this.utils.fnMsg("手机号码不能为空！");
    //     return false;
    //   } else if (!mobileFormat.test(this.user.mobile)) {
    //     this.utils.fnMsg("手机号码格式不正确！");
    //     return false;
    //   } else {
    //     return true;
    //   }
    // },
    /*
     * 倒计时
     */
    // setTime: function(time) {
    //   if (time > 0) {
    //     this.code.isSet = true;
    //     this.code.verify = time + "秒后再试";
    //     time = time - 1;
    //     var vm = this;
    //     setTimeout(function() {
    //       vm.setTime(time);
    //     }, 1000);
    //   } else {
    //     this.code.isSet = false;
    //     this.code.verify = "发送验证码";
    //   }
    // },
    fnSubmit: function() {
      if (this.fnCheckData()) {
        const { updatetime, id,createtime,status, ...params } = this.user;
        User.postBank(params).then((res) => {
          if (res) {
            this.utils.fnMsg(res.msg);
            if (res.status) {
              const vm = this;
              setTimeout(() => {
                vm.utils.fnOpenCommon(vm, { name: "my" });
              }, 2000);
            }
          }
        });
      }
    },
    // 数据检测
    fnCheckData: function() {
      //大陆身份证号码校验
      const isMatch = this.user.idcard.match(
        /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
      );

      //香港身份证号码校验
      //开头一位或两位大写字母，然后接上6-10位数字，最后一位数字或字母校验
      const isMatchHongKong = this.user.idcard.match(
        /^[A-Z]{1,2}[0-9]{6,10}[0-9A-Z]$/
      );

      //澳门身份证号码校验
      //开头数字1或者5或者7，然后接上6位数字，再接上一位数字或者大写字母校验
      const isMatchAoMen = this.user.idcard.match(/^[1|5|7][0-9]{6}[0-9A-Z]$/);

      //台湾身份证号码校验
      //开头一位小写或者大写字母，接上9位数字
      const isMatchTaiWan = this.user.idcard.match(/^[a-zA-Z][0-9]{9}$/);
      if (!this.user.bank) {
          this.utils.fnMsg("请选择开户银行");
          return false;
        } else if (!this.user.card) {
          this.utils.fnMsg("请输入银行卡号");
          return false;
        } else if (!this.user.name) {
          this.utils.fnMsg("请输入开户姓名");
          return false;
        } else if (!this.user.idcard) {
          this.utils.fnMsg("请输入开户身份证号");
          return false;
        } else if (
          !isMatch &&
          !isMatchHongKong &&
          !isMatchAoMen &&
          !isMatchTaiWan
        ) {
          this.utils.fnMsg("开户身份证号格式不正确！");
          return false;
        } else if (!this.user.province) {
          this.utils.fnMsg("请选择开户银行地区");
          return false;
        } else {
          return true
        }
      
    },
  },
};
</script>

<style lang="scss" scoped>
.van-action-sheet__item {
    height: 50px!important;
  }
div.bindBank {
  div.submit_btn {
    height: 50px;
    line-height: 50px;
  }

  .other {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
  .cont {
    border: 1px solid #eee;
    border-radius: 0.25rem;
    .list {
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #eee;
      input {
        height: 46px;
        line-height: 46px;
        border: 0;
        max-width: 95%;
      }
    }
  }
  .cont .bt {
    background-color: #fffcf4;
  }
}
</style>
